<template>
  <view class="comment-tag-list">
    <view
      v-for="tag in tagExpand ? tagList : tagList.slice(0, 10)"
      :key="tag.name"
      class="tag-item"
      :class="{ active: tag.name === active?.name }"
      @click="setActiveTagId(tag)"
    >
      {{ `${tag.name}(${tag.count})` }}
    </view>

    <view
      v-if="tagList.length >= 10"
      class="drop-item"
      @click="tagExpand = !tagExpand"
    >
      <wd-icon v-if="!tagExpand" name="arrow-down" />
      <wd-icon v-else name="arrow-up" />
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  active?: { id?: string; name: string };
  tagList: { id?: string; name: string; count: number }[];
}>();

const emit = defineEmits<{
  clickTag: [tag?: { id?: string; name: string }];
}>();

const tagExpand = ref(false);
const tagList = toRef(props, 'tagList');

const setActiveTagId = (tag: { id?: string; name: string }) => {
  if (tag.name === props.active?.name) {
    emit('clickTag');
  } else {
    emit('clickTag', tag);
  }
};
</script>

<style lang="scss" scoped>
.drop-item {
  background: #ffffff;
  border-radius: 50%;
  line-height: 2;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-tag-list {
  display: flex;
  gap: 8rpx 16rpx;
  flex-wrap: wrap;
  .tag-item {
    padding: 0 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    background: #ffffff;
    border: 1px solid #ffffff;
  }
  .active {
    color: #ff2f3b;
    background: rgba(255, 47, 59, 0.1);
    border: 1px solid #ff2f3b;
  }
}
</style>
